import bell from '@/assets/bell.png';
import read from '@/assets/read.png';
import { getNotification, handleNotification, handleReadAll } from '@/services/center';
import type { PaginationProps } from 'antd';
import { Badge, Card, Col, Collapse, Flex, Pagination, Space } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { useIntl } from 'umi';

//  我的消息
const Msg: React.FC = () => {
  const [pagePamras, setPagePamras] = useState({
    page: 1,
    pageSize: 10,
  });
  const [total, setTotal] = useState(0);
  const { page, pageSize } = pagePamras;
  const intl = useIntl();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<Center.MsgList[]>([]);
  const onChange: PaginationProps['onChange'] = (page) => {
    setPagePamras({
      ...pagePamras,
      page,
    });
  };

  const loadMoreData = async () => {
    const { pageSize, page } = pagePamras;
    try {
      setLoading(true);
      const { data: msgList } = await getNotification({ p: page, s: pageSize });
      const { records, total } = msgList;

      setTotal(total);
      setData(
        records,
        // records.map((item, index) => {
        //   return {
        //     ...item,
        //     handleFlag: index,
        //   };
        // }),
      );
      setLoading(false);
    } catch {
      setLoading(false);
    }
  };
  // 全部已读
  const handleReadAllMsg = async () => {
    await handleReadAll();
    loadMoreData();
  };
  useEffect(() => {
    loadMoreData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pagePamras]);
  const items = data.map((item: any) => {
    const { createdDate, note, handleFlag, id: cId, title } = item;
    return {
      key: cId,
      label: (
        <div>
          <Col
            key={cId}
            style={{ width: '100%' }}
            onClick={async () => {
              if (!handleFlag) {
                const { code } = await handleNotification({ ids: [cId] });

                if (code === '100200') {
                  setData(
                    data.map((item) => {
                      const { id } = item;
                      return cId !== id
                        ? item
                        : {
                            ...item,
                            handleFlag: true,
                          };
                    }),
                  );
                }
              }
            }}
            span={24}
          >
            <Flex justify="space-between" align="center">
              <Flex
                style={{
                  marginRight: 108,
                  flex: 1,
                  position: 'relative',
                  paddingRight: 34,
                  lineHeight: '26px',
                }}
              >
                <Space align="start" style={{ flex: 1 }}>
                  <Badge
                    style={{ width: 7, height: 7, top: 2.5, right: 2.5 }}
                    size="default"
                    dot={!handleFlag}
                  >
                    <img src={bell} width={24} />
                  </Badge>

                  <div
                    style={{ color: !handleFlag ? '#000' : '#999' }}
                    dangerouslySetInnerHTML={{ __html: title }}
                  />
                </Space>
              </Flex>
              <div style={{ color: '#999' }}>{dayjs(createdDate).format('YYYY-MM-DD')}</div>
            </Flex>
          </Col>
        </div>
      ),
      children: <div className="msg_bg">{note}</div>,
    };
  });
  return (
    <div className="msg">
      <Card
        bordered={false}
        loading={loading}
        style={{ minHeight: '50vh', borderRadius: '0 0 8px 8px' }}
      >
        {data.length > 0 ? (
          <Space
            align="center"
            style={{ justifyContent: 'flex-end', width: '100%', marginBottom: 8 }}
          >
            <div
              style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}
              onClick={handleReadAllMsg}
            >
              <img src={read} width={17} />

              <div style={{ color: '#0075E2' }}>{intl.formatMessage({ id: 'home.read_all' })}</div>
            </div>
          </Space>
        ) : null}
        {data.length > 0 ? (
          <>
            <Collapse
              className="msg_collapse"
              expandIconPosition="end"
              items={items}
              expandIcon={() => null}
              style={{ background: '#fff', padding: '0', border: 'none' }}
            />
            <Col style={{ marginTop: '40px', display: 'flex', justifyContent: 'flex-end' }}>
              <Pagination
                current={page}
                pageSize={pageSize}
                onChange={onChange}
                total={total}
                onShowSizeChange={(current: number) => {
                  setPagePamras({
                    ...pagePamras,
                    pageSize: current,
                  });
                }}
                showSizeChanger
              />
            </Col>
          </>
        ) : (
          <Flex
            align="center"
            justify="center"
            style={{ height: '100%', color: '#0270DF ', fontSize: 18, paddingTop: '25vh' }}
          >
            {intl.formatMessage({ id: 'center.no_msg' })}
          </Flex>
        )}
      </Card>
    </div>
  );
};

export default Msg;
